import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:playtruly/common/index.dart';

import 'index.dart';

class LoginPage extends GetView<LoginController> {
  const LoginPage({super.key});

  // 构建表单
  Widget _buildForm() {
    return Column(
      children: [
        // 标题
        Padding(
          padding: EdgeInsets.only(top: 20.h, bottom: 40.h),
          child: Text(
            '登录',
            style: TextStyle(
              color: Colors.black,
              fontSize: 24.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),

        // 手机号输入框
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 10.h),
          child: TextField(
            keyboardType: TextInputType.phone,
            decoration: const InputDecoration(
              hintText: '请输入手机号码',
              border: UnderlineInputBorder(),
              prefixIcon: Icon(Icons.phone_android),
            ),
            onChanged: (value) => controller.state.phone.value = value,
          ),
        ),

        // 验证码输入框
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 10.h),
          child: Row(
            children: [
              Expanded(
                child: TextField(
                  keyboardType: TextInputType.number,
                  decoration: const InputDecoration(
                    hintText: '请输入手机短信验证码',
                    border: UnderlineInputBorder(),
                    prefixIcon: Icon(Icons.security),
                  ),
                  onChanged: (value) => controller.state.verificationCode.value = value,
                ),
              ),
              SizedBox(width: 8.w),
              Obx(() => TextButton(
                onPressed: (controller.state.isSendingCode.value || !controller.state.isAgreeTerms.value)
                    ? null 
                    : () => controller.sendVerificationCode(),
                style: TextButton.styleFrom(
                  backgroundColor: (controller.state.isSendingCode.value || !controller.state.isAgreeTerms.value)
                      ? Colors.grey.shade400
                      : const Color(0xFFCB5050),
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20.r),
                  ),
                  padding: EdgeInsets.symmetric(horizontal: 16.w),
                ),
                child: Text(
                  controller.state.isSendingCode.value 
                      ? '${controller.state.countdown.value}s' 
                      : '发送验证码',
                  style: TextStyle(fontSize: 14.sp),
                ),
              )),
            ],
          ),
        ),

        // 同意用户协议
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 10.h),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Obx(() => SizedBox(
                width: 18.w,
                height: 18.h,
                child: Checkbox(
                  value: controller.state.isAgreeTerms.value,
                  onChanged: (value) => controller.state.isAgreeTerms.value = value ?? false,
                  shape: const CircleBorder(),
                  activeColor: const Color(0xFFCB5050),
                  side: BorderSide(color: Colors.red, width: 1.w),
                ),
              )),
              SizedBox(width: 6.w),
              Expanded(
                child: Wrap(
                  crossAxisAlignment: WrapCrossAlignment.center,
                  spacing: 2.w,
                  runSpacing: 0,
                  children: [
                    Text('勾选同意', 
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.black87,
                        height: 1.2,
                      )
                    ),
                    TextButton(
                      onPressed: () => controller.showUserManual(),
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.symmetric(horizontal: 2.w),
                        minimumSize: Size.zero,
                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      ),
                      child: Text(
                        '《用户手册》',
                        style: TextStyle(
                          color: Colors.black87, 
                          fontSize: 12.sp,
                          height: 1.2,
                        ),
                      ),
                    ),
                    Text('和', 
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.black87,
                        height: 1.2,
                      )
                    ),
                    TextButton(
                      onPressed: () => controller.showPrivacyPolicy(),
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.symmetric(horizontal: 2.w),
                        minimumSize: Size.zero,
                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      ),
                      child: Text(
                        '《隐私政策》',
                        style: TextStyle(
                          color: Colors.black87, 
                          fontSize: 12.sp,
                          height: 1.2,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),

        // 登录按钮
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 20.h),
          child: Obx(
            () => ElevatedButton(
              onPressed: controller.state.isLoading.value
                  ? null
                  : () => controller.handleLogin(),
              style: ElevatedButton.styleFrom(
                minimumSize: Size(double.infinity, 50.h),
                backgroundColor: const Color(0xFFCB5050),
                foregroundColor: Colors.white,
                disabledBackgroundColor: Colors.grey.shade400, // 加载状态时按钮变灰
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(25.r),
                ),
              ),
              child: controller.state.isLoading.value
                  ? SizedBox(
                      width: 20.w,
                      height: 20.h,
                      child: const CircularProgressIndicator(
                        color: Colors.white,
                        strokeWidth: 2,
                      ),
                    )
                  : Text('登录', style: TextStyle(fontSize: 18.sp)),
            ),
          ),
        ),

        // 注册选项
        Padding(
          padding: EdgeInsets.only(bottom: 20.h),
          child: TextButton(
            onPressed: () => Get.toNamed(RouteNames.systemRegist),
            child: Text(
              '注册账号',
              style: TextStyle(color: Colors.black54, fontSize: 14.sp),
            ),
          ),
        ),
      ],
    );
  }

  // 主视图
  Widget _buildView() {
    return SingleChildScrollView(
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20),
        ),
        child: _buildForm(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFCB5050),
      resizeToAvoidBottomInset: false, // 阻止键盘将页面顶起
      extendBodyBehindAppBar: true, // 内容延伸到AppBar区域
      extendBody: true, // 内容延伸到底部
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        toolbarHeight: 0, // 不显示工具栏，只用于设置状态栏
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarIconBrightness: Brightness.light,
          statusBarBrightness: Brightness.dark, // iOS
        ),
      ),
      body: SafeArea(
        top: false, // 不为顶部留出安全区域，允许内容延伸到状态栏
        child: Center(child: _buildView()),
      ),
    );
  }
}
